<html>
	<head>
	<style type="text/css">
		th, td {
			font:normal 68% verdana,arial,helvetica;
		}
		
		tr.pass td {
			background:#90ee90;
		}
		
		tr.fail td {
			background:#ffa07a;
		}
		
		.expand {
			background-image: url("./down.gif");
			background-repeat: no-repeat;
			background-position: 0 4px !important;
		}
		
		.collapse {
			background-image: url("./up.gif");
			background-repeat: no-repeat;
			background-position: 0 4px !important;
		}
		
		.expanded {
			display: table-row;
		}
		
		.collapsed {
			display: none;
		}
	</style>
	<script language="JavaScript">
		function expand(id) {
			document.getElementById("detail_" + id).className = "expanded";
		}
			   
		function collapse(id) {
			document.getElementById("detail_" + id).className = "collapsed";
		}
			   
		function change(id) {
			if(document.getElementById("control_" + id).className.match("expand")) {
				document.getElementById("control_" + id).className = "collapse";
				expand(id);
			} else {
				document.getElementById("control_" + id).className = "expand";
				collapse(id);
			} 
		}
	</script>
	</head>
	<table cellspacing="0" cellpadding="0" border="1" width="95%">
		<tbody>
			<tr>
				<th>Keyword</th>
				<th>Request</th>
				<th width="20">&nbsp;</th>
			</tr>
			<#assign id=0/>
			<#list results as result>
            <#assign id=id+1>
			<tr class="${result.success?string("pass","fail")}">
				<td>${result.keyword!"&nbsp;"}${result.toString()}</td>
				<td>${result.request!"&nbsp;"}</td>
				<td>
					<#if !result.success>
                        <a id="control_${id}" class="expand" href="javascript:change('${id}')">&nbsp;&nbsp;&nbsp;</a>
					<#else>
						&nbsp;
					</#if>
				</td>
			</tr>

            <#if !result.success>
            <tr class="collapsed" id="detail_${id}">
				<td colspan=3>${result.response!"&nbsp;"}</td>
			</tr>
            </#if>
			</#list>
		</tbody>
	</table>
</html>
